<template>
  <el-card class="case">
    <!-- 案件处理 -->
    <div class="case-title">
      <i class="el-icon-collection case-title_icon" /><span>案件处理</span>
    </div>
    <!-- 案件基本信息 -->
    <el-divider content-position="left">案件基本信息</el-divider>
    <el-descriptions title="" :column="4">
      <el-descriptions-item label="报案号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="保单号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="案件创建时间">{{
        caseDetail.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="所属公司">{{
        caseDetail.companyName
      }}</el-descriptions-item>
      <el-descriptions-item label="出险人">{{
        caseDetail.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{
        caseDetail.userIdCard
      }}</el-descriptions-item>
      <el-descriptions-item label="出险人手机号">{{
        caseDetail.userMobile
      }}</el-descriptions-item>
      <el-descriptions-item label="赔偿对象">
        <el-select v-model="claimType" size="small" placeholder="请选择">
          <el-option
            v-for="item in claimTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="责任判定">{{
        getLabelsByIds(
          caseDetail.responsibilityIds,
          CASE_RESPONSIBILITY_OPTIONS
        )
      }}</el-descriptions-item>
      <el-descriptions-item label="案件状态">{{
        CASE_STATUS[caseDetail.caseStatus]
      }}</el-descriptions-item>
      <el-descriptions-item label="有无附加险">{{
        CASE_ADDITIONAL[caseDetail.additional]
      }}</el-descriptions-item>
      <el-descriptions-item label="主险方案">
        <el-select v-model="mainScheme" size="small" placeholder="请选择">
          <el-option
            v-for="item in mainSchemeOptions"
            :key="item.id"
            :label="item.schemeNo"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="附加险方案">
        <el-select v-model="additionalScheme" size="small" placeholder="请选择">
          <el-option
            v-for="item in additionalSchemeOptions"
            :key="item.id"
            :label="item.schemeNo"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 沟通动态 -->
    <el-divider content-position="left">沟通动态</el-divider>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="caseDetail.connectRecords"
      size="small"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column prop="mainInsuredCompensationAmount" label="主险金额" />
      <el-table-column
        prop="additionalMainInsuredCompensationAmount"
        label="附加险金额"
      />
      <el-table-column prop="otherAmount" label="其它金额" />
      <el-table-column prop="connectType" label="沟通方式">
        <template slot-scope="scope">
          {{ CASE_CONNECT_TYPES[scope.row.connectType] }}
        </template>
      </el-table-column>
      <el-table-column prop="connectContent" label="沟通内容" />
      <el-table-column prop="lastUpdateTime" label="沟通时间（提交时间）" />
      <el-table-column prop="nextConnectTime" label="下次沟通时间" />
      <el-table-column prop="createUserName" label="创建人（理赔）" />
      <el-table-column prop="submitStatus" label="案件状态">
        <template slot-scope="scope">
          {{ CASE_STATUS[scope.row.submitStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="caseRemarks" label="案件备注" />
      <!-- <el-table-column label="查看" width="150px" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onCheckConnectRecord(scope.row)"
          />
        </template>
      </el-table-column> -->
    </el-table>
    <!--分页组件-->
    <!-- <pagination /> -->
    <!-- 沟通记录 -->
    <el-divider v-if="caseDetail.caseSpeek != 6" content-position="left">沟通记录</el-divider>
    <el-form
      ref="caseForm"
      size="mini"
      label-width="125px"
      label-position="right"
      :model="caseForm"
      class="demo-form-inline"
      v-if="caseDetail.caseSpeek != 6">
      <el-row>
        <el-col :span="12">
          <el-form-item label="主险赔付金额">
            <el-input
              v-model="caseForm.mainInsuredCompensationAmount"
              placeholder="主险赔付金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附加赔付金额">
            <el-input
              v-model="caseForm.additionalMainInsuredCompensationAmount"
              placeholder="附加赔付金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其它金额">
            <el-input v-model="caseForm.otherAmount" placeholder="其它金额" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="沟通方式">
            <el-select v-model="caseForm.connectType" placeholder="沟通方式">
              <el-option
                v-for="item in connectTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下次沟通时间">
            <el-date-picker
              v-model="caseForm.nextConnectTime"
              type="datetime"
              placeholder="选择日期时间"
              @change="onNextConnectTimeChange"
            />
            <span
              v-if="connectTime && connectTime > 0 && caseForm.nextConnectTime"
              class="connect-time"
            >当前日期已预约{{ connectTime }}人</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件备注">
            <el-input v-model="caseForm.caseRemarks" placeholder="案件备注" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="沟通内容">
            <el-input
              v-model="caseForm.connectContent"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件状态">
            <el-select v-model="caseForm.caseStatus" placeholder="案件状态">
              <el-option
                v-for="item in caseStatuses"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="主要资料上传">
        <el-upload
          ref="mainDoc"
          :file-list="mainDoc"
          :action="imagesUploadApi"
          :headers="authHeaders"
          :before-upload="() => accidentFIlesBeforeUpload('mainDoc')"
          :before-remove="() => beforeRemove('mainDoc')"
          :on-success="onUploadSuccess"
          :on-preview="onPreview"
          :on-remove="onRemove"
          multiple
          list-type="picture-card"
          accept="image/*"
        >
          <i slot="default" class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item label="附属资料上传">
        <el-upload
          ref="additionalDoc"
          :file-list="additionalDoc"
          :action="imagesUploadApi"
          :headers="authHeaders"
          :before-upload="() => accidentFIlesBeforeUpload('additionalDoc')"
          :before-remove="() => beforeRemove('additionalDoc')"
          :on-success="onUploadSuccess"
          :on-preview="onPreview"
          :on-remove="onRemove"
          multiple
          list-type="picture-card"
          accept="image/*"
        >
          <i slot="default" class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="caseDetail.caseSpeek != 6" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- 案件详情页 -->
    <el-divider content-position="left">案件详情页</el-divider>
    <el-descriptions title="" :column="4">
      <el-descriptions-item label="所属公司">{{
        caseDetail.companyName
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人">{{
        caseDetail.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="所属站点">{{
        caseDetail.companySiteName
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人手机号">{{
        caseDetail.userMobile
      }}</el-descriptions-item>
      <el-descriptions-item label="保单号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="报案人身份证号">{{
        caseDetail.userIdCard
      }}</el-descriptions-item>
      <el-descriptions-item label="报案号">{{
        caseDetail.reportNo
      }}</el-descriptions-item>
      <el-descriptions-item label="赔偿对象">{{
        caseDetail.claimType ? CASE_CLAIM_TYPES[caseDetail.claimType] : ''
      }}</el-descriptions-item>
      <el-descriptions-item label="出险类型">{{
        getLabelsByIds(caseDetail.accidentTypeIds, CASE_ACCIDENT_TYPES)
      }}</el-descriptions-item>
      <el-descriptions-item label="出险时间">{{
        caseDetail.accidentDate
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        caseDetail.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="保险方案">{{
        caseDetail.mainSchemeName
      }}</el-descriptions-item>
      <el-descriptions-item label="补充保险方案">{{
        caseDetail.additionalSchemeName
      }}</el-descriptions-item>
      <el-descriptions-item label="责任判定">{{
        getLabelsByIds(
          caseDetail.responsibilityIds,
          CASE_RESPONSIBILITY_OPTIONS
        )
      }}</el-descriptions-item>
      <el-descriptions-item label="事故地址">{{
        caseDetail.accidentAddress
      }}</el-descriptions-item>
      <el-descriptions-item label="事故概况">{{
        caseDetail.accidentDesc
      }}</el-descriptions-item>
      <el-descriptions-item label="理赔员" :span="4">{{
        caseDetail.responsibleUserName
      }}</el-descriptions-item>
      <el-descriptions-item label="主要资料管理" :span="4">
        <div class="disabled-upload">
          <el-upload
            action="#"
            :auto-upload="false"
            :disabled="true"
            :file-list="caseDetailMainDoc"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="onPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-button v-if="caseDetailMainDoc != null && caseDetailMainDoc.length > 0" type="primary" icon="el-icon-bottom" circle @click="downDoc"></el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="附属资料管理" :span="4">
        <div class="disabled-upload">
          <el-upload
            action="#"
            :auto-upload="false"
            :disabled="true"
            :file-list="additionalDetailMainDoc"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="onPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import crudInsuredUser from '@/api/insurance/user'
import { getAll } from '@/api/insurance/scheme'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import pagination from '@crud/Pagination'
import { detail, update, getConnectTimes } from '@/api/insurance/case'
import { getToken } from '@/utils/auth'
import {
  CASE_STATUS,
  CASE_CLAIM_TYPES,
  CASE_RESPONSIBILITY_OPTIONS,
  CASE_ADDITIONAL,
  CASE_CONNECT_TYPES,
  CASE_ACCIDENT_TYPES
} from '@/constants'

const defaultForm = {
  id: null,
  createUserId: null,
  isDeleted: null,
  createTime: null,
  lastUpdateTime: null,
  lastUpdateId: null,
  ownerId: null,
  ownerCompanyId: null,
  userName: null,
  userIdCard: null,
  userMobile: null,
  policyStartTime: null,
  policyEntTime: null,
  policyStatus: null
}

export default {
  name: 'CaseHandler',
  // components: { pagination },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '案件处理',
      url: 'api/insured-user',
      idField: 'id',
      sort: 'id,desc',
      params: { policyStatus: 1, isDeleted: 0 },
      crudMethod: { ...crudInsuredUser },
      optShow: {
        add: true,
        edit: true,
        del: false,
        reset: false
      }
    })
  },
  data() {
    return {
      CASE_STATUS,
      CASE_ADDITIONAL,
      CASE_RESPONSIBILITY_OPTIONS,
      CASE_CONNECT_TYPES,
      CASE_ACCIDENT_TYPES,
      CASE_CLAIM_TYPES,
      connectTypes: Object.keys(CASE_CONNECT_TYPES).map(key => ({
        value: key,
        label: CASE_CONNECT_TYPES[key]
      })),
      caseStatuses: Object.keys(CASE_STATUS).map(key => ({
        value: key,
        label: CASE_STATUS[key]
      })),
      claimTypes: Object.keys(CASE_CLAIM_TYPES).map(key => ({
        value: key,
        label: CASE_CLAIM_TYPES[key]
      })),
      caseDetail: {},
      caseForm: {},
      authHeaders: {
        Authorization: getToken()
      },
      claimType: '',
      mainDoc: [],
      additionalDoc: [],
      caseDetailMainDoc: [],
      additionalDetailMainDoc: [],
      connectTime: 0,

      dialogImageUrl: '',
      dialogVisible: false,
      connectRecordVisible: false,
      disabled: false,
      additionalSchemeOptions: [],
      mainSchemeOptions: [],
      mainScheme: '',
      additionalScheme: ''
    }
  },
  computed: {
    ...mapGetters(['baseApi', 'imagesUploadApi']),
    getLabelsByIds() {
      return function(ids, map) {
        if (ids == null || ids === undefined || map === undefined) {
          return ''
        }
        return ids
          .split(',')
          .map(id => map[id])
          .join('，')
      }
    }
  },
  watch: {
    caseDetail(newVal) {
      if (newVal) {
        this.claimType = '' + newVal.claimType
        if (newVal.mainScheme != null && newVal.mainScheme > 0) {
          this.mainScheme = newVal.mainScheme
        }
        if (newVal.additionalScheme != null && newVal.additionalScheme > 0) {
          this.additionalScheme = newVal.additionalScheme
        }
        this.caseDetailMainDoc = newVal.mainDoc.map(item => ({
          url: item,
          name: item
        }))
        this.additionalDetailMainDoc = newVal.additionalDoc.map(item => ({
          url: item,
          name: item
        }))
      }
    }
  },
  created() {
    this.getCaseHandlerDetail()
    getAll({ insuranceType: 0 }).then(res => {
      this.mainSchemeOptions = res
    })
    getAll({ insuranceType: 1 }).then(res => {
      this.additionalSchemeOptions = res
    })
  },
  methods: {
    getCaseHandlerDetail() {
      detail(this.$route.query.id).then(res => {
        this.caseDetail = res
        document.title = this.caseDetail.userName + '-处理案件'
      })
    },
    onNextConnectTimeChange(time) {
      if (time) {
        const stamp = time.getTime()
        getConnectTimes(stamp).then(res => {
          console.log(res)
          this.connectTime = res
        })
      } else {
        this.connectTime = 0
      }
    },
    onSubmit() {
      const paylaod = {
        id: this.$route.query.id,
        claimType: this.claimType,
        mainScheme: this.mainScheme,
        additionalScheme: this.additionalScheme,
        ...this.caseForm
      }
      console.log(paylaod)
      update(paylaod).then(res => {
        this.caseForm = {}
        this.mainDoc = []
        this.additionalDoc = []
        this.$refs['caseForm'].resetFields()
        this.getCaseHandlerDetail()
      })
    },
    accidentFIlesBeforeUpload(type) {
      this.fileType = type
      return true
    },
    onUploadSuccess(response, file, fileList) {
      this.caseForm[this.fileType] = fileList.map(f => f.response.realName)
    },
    onUploadError(e) {
      console.log(e)
    },
    onRemove(file, fileList) {
      this.caseForm[this.fileType] = fileList.map(f => f.response.realName)
    },
    beforeRemove(type) {
      this.fileType = type
      return true
    },
    onPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    onCheckConnectRecord(data) {
      console.log(data)
      this.connectRecordVisible = true
    },
    downDoc() {
      window.open(this.baseApi + '/api/insured-apply/down-doc?id=' + this.$route.query.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.case {
  margin: 10px 15px 43px;
  padding: 15px;
  background-color: #fff;
  /* box-shadow: 4px 4px 8px 4px rgba($color: #000000, $alpha: 0.05); */
  border-radius: 6px;
  font-size: 14px;
  &-title {
    display: flex;
    align-items: center;
    &_icon {
      margin-right: 10px;
    }
  }

  .connect-time {
    font-size: 12px;
    color: #e4393c;
  }

  & >>> {
    .el-descriptions-item__container {
      align-items: center;
    }
    .el-upload-list__item,
    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }
  .disabled-upload {
    & >>> {
      .el-upload-list--picture-card {
        display: flex;
        flex-wrap: wrap;
      }
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}
</style>
